/******************** 变量 ********************/
$cascader-trigger-color-state: (default, $border-color-base, $input-background, $text-color),
  (hover, $border-color-hover, $input-background, $text-color), (focus, $border-color-hover, $input-background, $text-color),
  (active, $primary-color, $input-background, $text-color), (disabled, $border-color-disabled, $disabled-background, $text-color-disabled) !default;

$cascader-trigger-space: 0.03rem 0 0.03rem $padding-sm;
$cascader-icon-color: $icon-color-secondary !default;
$cascader-item-color-hover: $item-background-hover !default;
$cascader-item-color-active: $item-background-active !default;

/******************** 组件 ********************/
@include colorState('.lv-cascader-trigger-container', $cascader-trigger-color-state);

.lv-cascader {
  display: inline-block;
  width: 100%;
  color: $text-color;
  font-size: $font-size-base;
  line-height: $line-height-coeff;
  vertical-align: middle;
  cursor: pointer;

  &-disabled {
    cursor: not-allowed;
  }
}

// 下拉面板
.lv-cascader-panel {
  min-width: 1.84rem;
  background-color: $popup-background;

  @include PanelBorderBox();

  & &-content {
    display: flex;

    &.lv-cascader-panel-has-options {
      height: 2.24rem;
    }
  }

  &.lv-cascader-panel-large {
    .lv-cascader-panel-content {
      &.lv-cascader-panel-has-options {
        height: 2.8rem;
      }
    }

    .lv-cascader-option {
      .lv-cascader-option-item {
        min-height: $height-lg;
      }
    }
  }

  & &-search {
    margin: $margin-sm;
  }
}

.lv-cascader-option-checkbox {
  margin-right: $margin-sm;
}

.lv-cascader-no-data {
  @include panel-dropdown-empty-style;
}

.lv-cascader-option {
  font-size: $font-size-base;

  &-list {
    flex: 1 0 auto;
    min-width: 1.84rem;
    height: 100%;
    border-left: $border-width-base $border-style-base $border-color-base;
    overflow-x: hidden;
    overflow-y: auto;

    @include component-scroll;

    &:first-child {
      border-left: $border-none;
    }
  }

  & &-item {
    display: flex;
    align-items: center;
    max-width: 3.68rem;
    min-height: $height-base;
    padding: 0 $padding-sm;
    cursor: pointer;
    transition: background-color 100ms;

    &:hover {
      background-color: $cascader-item-color-hover;
    }

    .lv-cascader-option-label {
      flex: 1 1 auto;
    }

    .lv-cascader-option-icon {
      line-height: 0;
      color: $cascader-icon-color;
      .lv-cascader-loading .lv-icon-loading{
        @include icon-size;
      }
    }
  }

  & &-item-disabled {
    color: nth(nth($select-color-state, 5), 4);
    background: $component-background;
    cursor: not-allowed;
  }

  & &-item-active {
    color: $primary-color;
    background-color: $cascader-item-color-active;

    &:hover {
      background-color: $cascader-item-color-active;
    }
  }
}

.lv-cascader-panel-z-index {
  z-index: $zindex-cascader;
}
